<template>
  <div>
    <div class="gva-table-box">
      <div>
        <el-form :inline="true" :model="searchData">
          <el-form-item label="客户">
            <el-select v-model="searchData.customerId" @change="getList()" clearable filterable
                       placeholder="请选择客户">
              <el-option v-for="item in customerOptions"
                         :key="item.customerId"
                         :label="item.customerId+':'+item.name"
                         :value="item.customerId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="员工">
            <el-select v-model="searchData.employeeId" @change="getList()" clearable filterable
                       placeholder="请选择员工">
              <el-option v-for="item in employeeOptions"
                         :key="item.employeeId"
                         :label="item.employeeId+':'+item.name"
                         :value="item.employeeId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="协商时间" prop="birthday">
            <el-date-picker
                v-model="timeList"
                type="datetimerange"
                start-placeholder="开始"
                end-placeholder="结束"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
                @change="test"
            />
          </el-form-item>
          <el-form-item>
            <!--            <el-button type="primary" icon="search" @click="getList()">查询</el-button>-->
            <el-button icon="refresh" @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openAdd">新增记录</el-button>
      </div>
      <el-table :data="tableData" row-key="negotiationId" v-loading="loading" table-layout="fixed">
        <el-table-column align="left" label="记录编号" min-width="120" prop="negotiationId"/>
        <el-table-column align="left" label="客户姓名" min-width="115" prop="customerName"/>
        <el-table-column align="left" label="员工姓名" min-width="115" prop="employeeName"/>
        <el-table-column align="left" label="协商时间" min-width="130" prop="negotiationTime"/>
        <el-table-column align="left" label="创建时间" min-width="130" prop="createTime"/>
        <el-table-column label="操作" min-width="220" fixed="right">
          <template #default="scope">
            <!--            <el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button>-->
            <el-button type="primary" link icon="ChatLineRound" @click="openInfo(scope.row)">详情</el-button>
            <el-popover v-model="scope.row.visible" placement="top" width="160">
              <p>确定要删除吗?</p>
              <div style="text-align: right; margin-top: 8px;">
                <el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" @click="deleteFunc(scope.row)">确定</el-button>
              </div>
              <template #reference>
                <el-button type="danger" link icon="delete">删除</el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"
                       :total="total" layout="total, sizes, prev, pager, next, jumper"
                       :hide-on-single-page="pageSize===10"
                       @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
      </div>
    </div>
    <!--    详情-->
    <el-dialog v-model="infoDialog" :header="'记录详情'" draggable width="430px">
      <el-form label-position="left" :model="info">
        <el-form-item label="记录编号:">
          <el-input v-model.trim="info.negotiationId" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="客户 ID：">
          <el-input v-model.trim="info.customerId" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="客户姓名:">
          <el-input v-model.trim="info.customerName" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="员工 ID：">
          <el-input v-model.trim="info.employeeId" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="员工姓名:">
          <el-input v-model.trim="info.employeeName" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="协商时间:">
          <el-input v-model.trim="info.negotiationTime" readonly="readonly"/>
        </el-form-item>
        <el-form-item label="协商内容:">
          <el-input v-model.trim="info.content" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                    readonly="readonly"/>
        </el-form-item>
      </el-form>

    </el-dialog>

    <!--    新增修改模态框-->
    <el-dialog v-model="openDialog" :title="dialogFlag+'记录'" :show-close="false"
               :close-on-press-escape="false" :close-on-click-modal="false"
               draggable width="500px">
      <div style="overflow:auto;padding:0 12px;">
        <el-form ref="from" :model="info" label-width="80px">
          <el-form-item label="记录编号:" v-if="dialogFlag==='编辑'">
            <el-input v-model.trim="info.negotiationId" readonly="readonly"/>
          </el-form-item>
          <el-form-item label="客户：">
            <el-select v-model="info.customerId" clearable filterable placeholder="请选择客户">
              <el-option v-for="item in customerOptions"
                         :key="item.customerId"
                         :label="item.customerId+':'+item.name"
                         :value="item.customerId"/>
            </el-select>
          </el-form-item>

          <el-form-item label="员工：">
            <el-select v-model="info.employeeId" clearable filterable placeholder="请选择员工">
              <el-option v-for="item in employeeOptions"
                         :key="item.employeeId"
                         :label="item.employeeId+':'+item.name"
                         :value="item.employeeId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="协商时间:">
            <el-date-picker
                v-model="info.negotiationTime"
                type="date"
                placeholder="选择一个时间"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="协商内容:">
            <el-input v-model.trim="info.content" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog()">取 消</el-button>
          <el-button type="primary" @click="editOrAdd()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";
import {delNegotiation, getNegotiationList, saveNegotiation} from "@/api/negotiation";
import {employeesList} from "@/api/authority";
import {getCustomerList} from "@/api/customer";
//data
const tableData = ref()
const info = ref({
  negotiationId: '',
  employeeId: '',
  employeeName: '',
  content: '',
  customerId: '',
  customerName: '',
  negotiationTime: ''
})
const from = ref()
const openDialog = ref(false)
const loading = ref(true)
const dialogFlag = ref()
const infoDialog = ref(false)
//page
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const searchData = ref({customerId: '', startTime: '', endTime: ''})

const employeeOptions = ref([])
const customerOptions = ref([])

const timeList = ref()

const test = () => {
  searchData.value.startTime = timeList.value[0]
  searchData.value.endTime = timeList.value[1]
  getList()
}


// 重置按钮
const clear = () => {
  searchData.value = {teamName: ''}
  timeList.value = []
  getList()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  page.value = val
  getList()
}
//查询
const getList = async () => {
  loading.value = true
  const res = await getNegotiationList({page: page.value, pageSize: pageSize.value, ...searchData.value})
  await getEmployee()
  await getCustomers()
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = +res.data.total
    loading.value = false
  }
}
//删除
const deleteFunc = async (row) => {
  const res = await delNegotiation(row.negotiationId)
  if (res.code === 0) {
    ElMessage({type: 'success', message: res.msg})
  }
  row.visible = false
  await getList()
}
//修改
// const openEdit = (row) => {
//   info.value = JSON.parse(JSON.stringify(row))
//   dialogFlag.value = '修改'
//   openDialog.value = true
// }
//新增
const openAdd = () => {
  initForm()
  dialogFlag.value = '新增'
  openDialog.value = true
}
const openInfo = (row) => {
  info.value = JSON.parse(JSON.stringify(row))
  infoDialog.value = true
}


//新增或修改请求
const editOrAdd = async () => {
  let res
  const req = {...info.value}
  if (dialogFlag.value === '新增') {
    res = await saveNegotiation(req)
  } else {
    // res = await editTeam(req)
  }
  if (res.code === 0) {
    ElMessage({type: 'success', message: res.msg})
    await closeDialog()
  }
}
//关闭模态框
const closeDialog = async () => {
  openDialog.value = false
  initForm()
  await getList()
}
//初始化表单
const initForm = () => {
  if (from.value) {
    from.value.resetFields()
  }
  info.value = {}
  dialogFlag.value = ''
}

const getEmployee = async () => {
  const res = await employeesList()
  employeeOptions.value = res.data
}

const getCustomers = async () => {
  const res = await getCustomerList()
  customerOptions.value = res.data
}

getList()

</script>
<style scoped lang="scss"></style>
